<template>
  <view class="all-cities dark">
    <view class="all-cities-title">全部城市</view>
    <view class="all-cities-container">
      <!-- 字母索引 -->
      <view class="alphabet-index">
        <view
          v-for="letter in Object.keys(cities)"
          :key="letter"
          class="alphabet-letter"
          @click="scrollToLetter(letter)"
        >
          {{ letter }}
        </view>
      </view>

      <!-- 城市列表 -->
      <!-- 城市列表：改用scroll-view组件 -->
      <scroll-view
        class="city-list"
        scroll-y="true"
        :scroll-into-view="scrollToView"
        scroll-with-animation="true"
        :scroll-top="scrollTop"
      >
        <view
          v-for="(group, letter) in cities"
          :key="letter"
          class="city-group"
          :id="'group-' + letter"
        >
          <view class="group-title">{{ letter }}</view>
          <view
            v-for="city in group"
            :key="city"
            class="city-item"
            @click="selectCity(city)"
          >
            {{ city }}
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import { citiesData as _cities } from "@/data-test/all-city-data";
  export default {
    name: "AllCities",
    data() {
      return {
        cities: _cities,
        scrollToView: "",
        scrollTop: 0,
      };
    },
    created() {},
    methods: {
      selectCity(city) {
        this.$emit("city-selected", city);
      },
      scrollToLetter(letter) {
        // #ifdef H5
        const element = document.getElementById("group-" + letter);
        if (element) {
          element.scrollIntoView({ behavior: "smooth" });
        }
        // #endif
        // #ifdef MP-WEIXIN

        // 直接设置目标id，scroll-view会自动滚动到对应元素
        const groupEl = "group-" + letter;
        this.scrollToView = groupEl;
        // 兼容处理：如果第一次设置没生效，延迟重试一次
        setTimeout(() => {
          this.scrollToView = groupEl;
        }, 100);
        // #endif
      },
    },
  };
</script>

<style>
  .all-cities {
    padding: 15px;
    margin-top: 10px;
  }

  .all-cities-title {
    font-size: 16px;
    margin-bottom: 10px;
    color: #f0f0f0;
  }

  .all-cities-container {
    display: flex;
    height: calc(100vh - 360px);
    flex-direction: row-reverse;
  }

  .alphabet-index {
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 10px;
    overflow-y: auto;
  }

  .alphabet-letter {
    color: #f0f0f0;
    font-size: 12px;
    margin: 3px 0;
    cursor: pointer;
  }

  .alphabet-letter:hover {
    color: #409eff;
  }
  /*  alphabet-index scrollbar 样式成背景设置成黑色模式 */
  .alphabet-index::-webkit-scrollbar {
    width: 5px;
  }
  .alphabet-index::-webkit-scrollbar-track {
    background: #1e1e1e;
    border-radius: 10px;
  }
  /*  滚动条滑块 */
  .alphabet-index::-webkit-scrollbar-thumb {
    background: #3d3d3d;
    border-radius: 10px;
    /* transition: background 0.3s ease; */
  }
  .city-list {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  .city-list::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }
  .city-list >>> .uni-scroll-view::-webkit-scrollbar {
    display: none;
  }
  .city-group {
    margin-bottom: 10px;
  }

  .group-title {
    color: #888;
    font-size: 14px;
    padding: 5px 0;
    background-color: #333;
    padding-left: 10px;
  }

  .city-item {
    color: #f0f0f0;
    padding: 8px 15px;
    cursor: pointer;
  }

  .city-item:hover {
    background-color: #8d8d8d63;
  }

  .loading-text,
  .error-text {
    text-align: center;
    padding: 20px;
    color: #f0f0f0;
  }

  .error-text {
    color: #ff4d4f;
  }
</style>
